<template>
  <div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
let echarts = require("echarts");
export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      list: "cate/list",
    }),
  },
  methods: {
    ...mapActions({
      reqList: "cate/reqList",
    }),
  },
  mounted() {
    // 请求数据
    this.reqList();
  },

  watch: {
    // 监听list
    list: {
      handler() {
        if (this.list.length > 0) {
          console.log("开始画图");
          console.log(this.list);

          // 折线图
          var myChart = echarts.init(document.getElementById("left"));
          var option = {
            title: {
              text: "商品分类子类数据",
            },
            tooltip: {},
            legend: {
              data: ["数量"],
            },
            xAxis: {
              data: this.list.map((item) => item.catename),
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: this.list.map((item) => item.children ? item.children.length : 0),
                smooth: true,
              },
            ],
          };
          myChart.setOption(option);

          // 饼状图
          var myPie = echarts.init(document.getElementById("right"));
          option = {
            title: {
              text: "Referer of a Website",
              subtext: "Fake Data",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: "50%",
                data: this.list.map(item=>({name:item.catename,value:item.children?item.children.length:0})),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          myPie.setOption(option);
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
#left,
#right {
  width: 550px;
  height: 300px;
  border: 1px solid #ccc;
  float: left;
  margin: 0 20px;
}
</style>